<template>
    <div id="RoomSetting">
        <div class="bbbug_main_right">
            <div class="bbbug_main_right_room">
                <div class="bbbug_main_right_room_title">我的个人中心
                    <div class="bbbug_main_right_song_right" @click="updateMyInfo">保存</div>
                </div>
                <el-form label-width="60px" class="bbbug_my_setting__form" v-loading="loading">
                    <div style="text-align: center;margin-bottom: 20px;">
                        <el-upload :action="uploadHeadUrl" :show-file-list="false"
                            :on-success="handleProfileHeadUploadSuccess" :before-upload="doUploadBefore"
                            :data="baseData">
                            <img :src="getStaticUrl(userInfo.user_head)" class="xiaomi"
                                :onerror="getStaticUrl('new/images/nohead.jpg')"
                                style="border-radius: 10px;width:80px;height:80px;" />
                        </el-upload>
                        <div>ID:
                            <font color=orangered style="margin-left:5px;font-weight: bolder;">
                                {{userInfo.user_id}}</font>
                        </div>
                    </div>
                    <el-form-item label="昵称">
                        <el-input size="medium" autocomplete="off" placeholder="请输入你的昵称" v-model="userInfo.user_name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="签名">
                        <el-input size="medium" autocomplete="off" placeholder="请输入你的签名" v-model="userInfo.user_remark">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="摸摸">
                        <el-input size="medium" autocomplete="off" placeholder="" v-model="userInfo.user_touchtip">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select size="medium" v-model="userInfo.user_sex" placeholder="请选择你的性别" class="allLine"
                            style="margin-left:0px;">
                            <el-option v-for="item in sexList" :key="item.valule" :label="item.title" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input size="medium" autocomplete="off" placeholder="你的密码,不修改请留空"
                            v-model="userInfo.user_password"></el-input>
                    </el-form-item>
                </el-form>
                <div class="bbbug_my_setting__clear">
                    <button class="bbbug_my_setting__clear_button" @click="logout">退出登录</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export
        default {
            data() {
                return {
                    loading: false,
                    userInfo: {},
                    roomInfo: {},
                    uploadHeadUrl: "",
                    baseData: false,
                    sexList: [{
                        value: 0,
                        title: '女生',
                    }, {
                        value: 1,
                        title: '男生',
                    }],
                }
            },
            created() {
                this.userInfo = Object.assign({}, this.global.userInfo);
                this.roomInfo = Object.assign({}, this.global.roomInfo);

                this.userInfo.user_name = decodeURIComponent(this.userInfo.user_name);

                this.uploadHeadUrl = this.global.apiUrl + "/api/attach/uploadHead";
                this.baseData = this.global.baseData;
                if (this.userInfo.user_id < 0) {
                    this.$parent.hideAll();
                    this.$parent.showLoginForm();
                }
            },
            methods: {
                /**
                 * @description: 上传头像前校验
                 * @param {file} 选择的文件
                 * @return {bool} 是否校验通过
                 */
                doUploadBefore(file) {
                    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('发送图片只能是 JPG/PNG/GIF 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('发送图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                /**
                 * @description: 头像上传成功事件
                 * @param {obj} 服务器返回数据
                 * @return {file} 上传的本地文件
                 */
                handleProfileHeadUploadSuccess(res, file) {
                    var that = this;
                    if (res.code == 200) {
                        that.userInfo.user_head = that.getStaticUrl(res.data.attach_thumb);
                    } else {
                        that.$message.error(res.msg);
                    }
                },
                /**
                 * @description: 更新我的资料
                 * @param {null}
                 * @return {null}
                 */
                updateMyInfo() {
                    let that = this;
                    that.loading = true;
                    that.request({
                        url: "user/updateMyInfo",
                        data: that.userInfo,
                        success(res) {
                            that.$message.success(res.msg);
                            that.request({
                                url: "user/getmyinfo",
                                success(res) {
                                    that.loading = false;
                                    that.$parent.userInfo = res.data;
                                    that.global.userInfo = res.data;
                                    that.$parent.hideAll();
                                },
                                error() {
                                    that.loading = false;
                                }
                            });
                        },
                        error() {
                            that.loading = false;
                        }
                    });
                },
                /**
                 * @description: 退出登录
                 * @param {null}
                 * @return {null}
                 */
                logout() {
                    var that = this;
                    that.$confirm('是否确认退出当前登录的账号?', '退出登录', {
                        confirmButtonText: '退出',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        localStorage.removeItem('access_token');
                        that.global.userInfo = that.global.guestUserInfo;
                        that.global.baseData.access_token = that.global.guestUserInfo.access_token;
                        that.$parent.hideAll();
                        that.$parent.getUserInfo();
                    }).catch(function () { });
                },
            },
        }
</script>
<style>
    .bbbug_my_setting__form {
        background-color: white;
        padding: 20px;
        padding-left: 0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 60px;
        top: 55px;
        overflow: hidden;
        overflow-y: auto;
    }

    .el-select {
        display: block;
    }

    .bbbug_my_setting__clear {
        position: absolute;
        left: 0;
        right: 10px;
        bottom: 10px;
        text-align: right;
    }

    .bbbug_my_setting__clear_button {
        background-color: orangered;
        color: white;
        padding: 10px 30px;
        border-radius: 5px;
        border: none;
        outline: none;
        cursor: pointer;
    }

    .bbbug_my_setting__clear_button:active {
        background-color: red;
    }
</style>